<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
import LossDiagramEcharts from './components/loss-diagram-echarts.vue'; // 导入图表组件

// 接收参数和事件
const props = defineProps<{
  nodeCount: number;
  flowCount: number;
}>();

const emit = defineEmits(['close', 'calculationComplete', 'openResultModal']);

const state = reactive({
    calcStart: false
})

// 计算结果数据
const results = ref({
  quantumTime: 0,
  classicalTime: 0,
  optimality: 0,
  vnfCount: 0
});

// 模拟计算进度的定时器
let intervalId: number | null = null;

// 模拟计算过程
onMounted(() => {
    state.calcStart = true
  // 设置3秒后自动完成计算
  setTimeout(() => {
    // 根据节点数和流量数设置结果数据
    const resultData = {
      quantumTime: props.nodeCount === 5 && props.flowCount === 3 ? 0.77 :
                   props.nodeCount === 5 && props.flowCount === 2 ? 0.82 :
                   props.nodeCount === 4 && props.flowCount === 3 ? 1.77 : 1.77,
      classicalTime: 75.65,
      optimality: 100,
      vnfCount: props.nodeCount === 5 && props.flowCount === 3 ? 3 :
                props.nodeCount === 5 && props.flowCount === 2 ? 2 :
                props.nodeCount === 4 && props.flowCount === 3 ? 3 : 2
    };
    
    // 自动关闭当前弹窗并打开结果弹窗
    setTimeout(() => {
      emit('openResultModal', resultData);
      emit('close');
    }, 0);
    
    if (intervalId) {
      clearInterval(intervalId);
    }
  }, 3000);
  
});

// 组件销毁前清理定时器
onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});

// 关闭弹窗/停止计算
const stopCalculation = () => {
  state.calcStart = false
  emit('close');
};

</script>

<template>
  <div class="fixed inset-0 flex items-center justify-center z-50">
    <!-- 背景遮罩 -->
    <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
    
    <!-- 弹窗内容 -->
    <div class="relative w-[45.56vw] h-[47.16vh] bg-black/90 rounded-[0.83vw] border-[0.28vw] border-[rgba(0,182,206,0.5)] shadow-lg shadow-[#1CC9BE]/20 z-10">
      <!-- 弹窗标题栏 -->
      <div class="flex justify-between items-center mb-[0.49vh] bg-[#2B2B2B] h-[6.91vh] pr-[1.67vw] pl-[1.67vw] rounded-t-[0.6vw]">
        <h2 class="text-base text-white font-normal">正在计算中，请耐心等待</h2>
        <button 
          @click="stopCalculation" 
          class="px-4 py-1 bg-transparent border border-[#1CC9BE]/60 text-[#1CC9BE] text-sm rounded-sm hover:bg-[#1CC9BE]/10"
        >
          停止计算
        </button>
      </div>
      
      <!-- 图表区域 -->
      <div class="h-[36vh] pt-[5.19vh] pb-[2.72vh] pl-[1.94vw] pr-[1.94vw] bg-black/80 rounded-sm">
        <LossDiagramEcharts id="calculation-diagram" :calcStart="state.calcStart" />
      </div>
    </div>
  </div>
</template>